<template>
	<view class="wrap">
		<u-toast ref="uToast" />
		<view class="content">
			<u-form :model="infoForm" ref="infoFormRef">
				<u-form-item label="班级" prop="grade" label-width="150">
					<u-input v-model="infoForm.grade" class="u-border-bottom" placeholder="请输入班级" maxlength=10 />
				</u-form-item>
				<u-form-item label="手机" prop="mobile" label-width="150">
					<u-input v-model="infoForm.mobile" class="u-border-bottom" placeholder="请输入手机" maxlength=11 />
				</u-form-item>
				<u-form-item label="邮箱" prop="email" label-width="150">
					<u-input v-model="infoForm.email" class="u-border-bottom" placeholder="请输入邮箱" maxlength=30 />
				</u-form-item>
				<u-form-item label="新密码" prop="password" label-width="150">
					<u-input v-model="infoForm.password" class="u-border-bottom" placeholder="请输入密码" maxlength=15
						type="password" />
				</u-form-item>
				<u-form-item label="确认密码" prop="rePassword" label-width="150">
					<u-input v-model="infoForm.rePassword" class="u-border-bottom" placeholder="请确认密码" maxlength=15
						type="password" />
				</u-form-item>
				<view class="tips">需修改其他信息请联系管理员</view>
			</u-form>
			<u-button @click="editinfo()" :loading="buttonLoading" type="success">确认修改</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			//验证手机规则
			const checkPhone = (rule, value, callback) => {
				if (value === "" || value === null) {
					return callback();
				}
				const regPhone = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
				if (regPhone.test(value)) {
					//合法手机
					return callback();
				}
				callback(new Error("请输入合法手机号"));
			};
			return {
				buttonLoading: false,
				infoForm: {
					grade: uni.getStorageSync('userInfo').grade,
					mobile: uni.getStorageSync('userInfo').mobile,
					email: uni.getStorageSync('userInfo').email,
					password: null,
					rePassword: null
				},
				id: uni.getStorageSync('userInfo')._id,
				infoRules: {
					grade: [{
						required: true,
						message: '班级不能为空',
						trigger: "change"
					}],
					mobile: [{
						validator: checkPhone,
						trigger: ['change', 'blur'],
					}],
					email: [{
						type: 'email',
						message: '请输入正确的邮箱格式',
						trigger: ['change', 'blur'],
					}],
					password: [{
						// 正则不能含有两边的引号
						pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
						message: '需同时含有字母和数字，长度在6-12之间',
						trigger: ['change', 'blur'],
					}],
					rePassword: [{
						validator: (rule, value, callback) => {
							return value === this.infoForm.password;
						},
						message: '两次输入的密码不相等',
						trigger: 'blur',
					}],
				}
			};
		},
		methods: {
			editinfo() {
				this.$refs.infoFormRef.validate(async valid => {
					if (!valid) return
					if (!this.infoForm.password) {
						delete this.infoForm.password
					}
					this.buttonLoading = true;
					delete this.infoForm.rePassword
					console.log(this.id, this.infoForm, 8888)
					await uni.request({
							url: "http://192.168.2.149:3000/user/update/" + this.id,
							method: "PUT",
							data: this.infoForm
						})
						.then((res) => {
							console.log(res)
							if (res[1].data.status === "ok") {
								console.log(111)
								this.$refs.infoFormRef.resetFields();
								uni.setStorage({
										key: "userInfo",
										data: res[1].data.data,
									}),
									this.$refs.uToast.show({
										title: '修改信息成功,即将跳转到主页面',
										type: 'success',
										position: 'top',
										isTab: 'true',
										url: '/pages/Login/Home'
									})
							} else {
								this.$refs.uToast.show({
									title: '修改信息失败',
									type: 'error',
									position: 'top',
								});
								this.buttonLoading = false;
							}
						})
				});
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.infoFormRef.setRules(this.infoRules);
		}
	};
</script>

<style lang="scss" scoped>
	.wrap {
		font-size: 28rpx;

		.content {
			width: 600rpx;
			margin: 50rpx auto 0;

			.title {
				text-align: left;
				font-size: 50rpx;
				font-weight: 500;
				margin-bottom: 100rpx;
			}

			input {
				text-align: left;
				margin-bottom: 10rpx;
				padding-bottom: 6rpx;
			}

			.tips {
				color: $u-type-info;
				margin-bottom: 50rpx;
				margin-top: 8rpx;
			}

			.getCaptcha {
				background-color: #55AA00;
				color: $u-tips-color;
				border: none;
				font-size: 30rpx;
				padding: 12rpx 0;

				&::after {
					border: none;
				}
			}
		}
	}
</style>
